<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代客下单</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            height: 100vh; /* 设置最大高度 */
            overflow: hidden; /* 禁止总体纵向滚动 */
        }

        .container {
            display: flex;
            width: 100%;
            height: calc(100vh - 40px); /* 适应窗口高度 */
        }

        .product-list {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 70%;
            height: 100%; /* 设置高度 */
            overflow-y: auto; /* 允许纵向滚动 */
            margin-right: 20px; /* 添加右外边距 */
        }

        .cart {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 30%;
            display: flex;
            flex-direction: column;
            height: 93%; /* 设置高度 */
        }

        .cart-content {
            flex-grow: 1; /* 使内容区域可扩展 */
            overflow-y: auto; /* 允许纵向滚动 */
            margin-bottom: 20px; /* 确保底部有一定的间距 */
        }

        .product-header,
        .cart-header {
            display: grid; /* 使用 grid 布局 */
            grid-template-columns: 40% 20% 20% 20%; /* 按百分比设置列宽 */
            gap: 10px; /* 列间隙 */
            padding: 10px 0;
            font-weight: bold;
            border-bottom: 1px solid #eaeaea;
            text-align: left; /* 标题左对齐 */
        }

        .product,
        .cart-item {
            display: grid; /* 使用CSS Grid布局 */
            grid-template-columns: 40% 20% 20% 20%; /* 确保和 header 对齐 */
            gap: 10px; /* 列间隙 */
            padding: 10px 0;
            align-items: center; /* 垂直居中 */
            border-bottom: 1px solid #eaeaea;
        }

        .product-image-name {
            display: flex;
            align-items: center; /* 垂直居中 */
            overflow: hidden; /* 超出部分隐藏 */
        }

        .product img {
            width: 60px; /* 商品图片宽度 */
            height: 60px; /* 商品图片高度 */
            margin-right: 5px; /* 图片和文本之间的间距 */
        }

        .product-info {
            flex-direction: column; /* 竖排商品名和规格 */
            overflow: hidden; /* 超出隐藏 */
        }

        .product-name {
            font-weight: bold; /* 商品名加粗 */
            overflow: hidden; /* 超出隐藏 */
            white-space: nowrap; /* 不换行 */
            text-overflow: ellipsis; /* 溢出显示省略号 */
            min-width: 120px; /* 商品名的最小宽度 */
            max-width: 200px; /* 商品名的最大宽度 */
        }

        .spec-name {
            font-size: 12px; /* 规格名更小一点 */
            color: #666; /* 规格名颜色 */
        }

        .stock,
        .price {
            min-width: 60px; /* 库存的最小宽度 */
            max-width: 80px; /* 库存的最大宽度 */
            text-align: center; /* 水平居中 */
            overflow: hidden; /* 超出隐藏 */
            white-space: nowrap; /* 不换行 */
            text-overflow: ellipsis; /* 溢出显示省略号 */
        }

        .price {
            min-width: 80px; /* 价格的最小宽度 */
            max-width: 100px; /* 价格的最大宽度 */
            text-align: right; /* 价格右对齐 */
        }

        .button-container {
            display: flex;
            align-items: center;
            justify-content: center; /* 按钮居中对齐 */
        }

        .quantity input {
            width: 50px; /* 设置固定宽度 */
            text-align: center; /* 文本居中 */
            border: 1px solid #007bff; /* 添加边框 */
            border-radius: 4px; /* 圆角 */
            padding: 5px; /* 内边距 */
            margin-left: 5px; /* 左间距 */
            font-size: 16px; /* 字体大小 */
        }

        .add-to-cart {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
        }

        .remove-icon {
            cursor: pointer; /* 手型光标 */
            color: #808080; /* 设置为灰色 */
        }

        .summary {
            margin-top: 20px; /* 顶部空间 */
            display: flex; /* 使用弹性布局 */
            flex-direction: column; /* 列方向 */
            align-items: flex-start; /* 左对齐 */
        }

        .selected-count {
            font-size: 0.9em; /* 字体大小设置为较小 */
            color: #fa734f; /* 设置已选商品种类的颜色 */
        }

        .next-step {
            margin-left: auto; /* 向右对齐 */
            background-color: #fa734f; /* 橙色按钮 */
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            height: 40px; /* 固定高度 */
        }

        .total-next {
            display: flex; /* 水平布局 */
            justify-content: space-between; /* 两端对齐 */
            align-items: center; /* 垂直居中 */
            width: 100%; /* 宽度100% */
            margin-top: 10px; /* 上间距 */
        }

        .search-container {
            display: flex;
            margin-bottom: 10px;
        }

        .search-container input {
            padding: 5px;
            border: 1px solid #007bff;
            border-radius: 4px 0 0 4px;
            font-size: 16px;
            width: 200px; /* 设置搜索框宽度 */
        }

        .search-container button {
            padding: 5px 10px;
            border: none;
            background-color: #007bff;
            color: white;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }

        .search-container button:hover {
            background-color: #0056b3; /* 鼠标悬停颜色 */
        }

        .cart-product-spec {
            font-size: 12px; /* 小于商品名的规格字体大小 */
            color: #666; /* 规格名颜色 */
        }

        .cart-product-container {
            display: flex;
            flex-direction: column; /* 上下显示商品名和规格 */
        }

        /* 弹出提示框样式 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定定位 */
            z-index: 1000; /* 在最上层 */
            left: 0;
            top: 0;
            width: 100%; /* 宽度100% */
            height: 100%; /* 高度100% */
            overflow: auto; /* 允许滚动 */
            background-color: rgba(0, 0, 0, 0.5); /* 背景透明度 */
            padding-top: 100px; /* 顶部留出空间 */
        }

        .modal-content {
            background-color: #fff; /* 白色背景 */
            border-radius: 8px; /* 圆角 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 阴影效果 */
            margin: 0 auto; /* 居中 */
            padding: 20px; /* 内边距 */
            width: 90%; /* 宽度百分比 */
            max-width: 400px; /* 最大宽度 */
        }

        .close {
            color: #aaa;
            float: right; /* 右对齐 */
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000; /* 悬停时颜色 */
            text-decoration: none;
            cursor: pointer;
        }

        h2 {
            margin-top: 0; /* 消除标题的上边距 */
            font-size: 1.5em; /* 标题字体大小 */
            color: #333; /* 标题颜色 */
        }

        .modal-content button {
            background-color: #007bff; /* 按钮背景颜色 */
            color: white; /* 按钮字体颜色 */
            border: none;
            padding: 10px 15px;
            margin-top: 15px; /* 上间距 */
            border-radius: 5px; /* 圆角 */
            cursor: pointer;
            transition: background-color 0.3s; /* 添加特效 */
        }

        .modal-content button:hover {
            background-color: #0056b3; /* 悬停时的颜色 */
        }

        #codeInputContainer {
            margin-top: 15px; /* 上间距 */
        }

    </style>
</head>

<body>
<div class="container">
    <div class="product-list">
        <h2>商品列表</h2>
        <div class="search-container">
            <input type="text" id="search-input" placeholder="搜索商品..." />
            <button id="search-button">查询</button>
        </div>
        <div class="product-header">
            <span>产品</span>
            <span class="stock">库存</span>
            <span class="price">价格</span>
            <span>操作</span>
        </div>
        <div id="product-items"></div> <!-- 商品列表区域 -->
    </div>
    <div class="cart">
        <h2>购物车</h2>
        <div class="cart-content">
            <div class="cart-header">
                <span>产品</span>
                <span class="quantity">数量</span>
                <span class="price">小计</span>
                <span>操作</span>
            </div>
            <div id="cart-items"></div> <!-- 购物车列表区域 -->
        </div>
        <div class="summary">
            <div>
                已选商品种类：<span id="selected-count" class="selected-count">0</span>
            </div>
            <div class="total-next">
                <div class="total">
                    合计金额：<span id="total-amount">¥0.00</span>
                </div>
                <button class="next-step">下一步</button>
            </div>
        </div>
    </div>
</div>

<!-- 弹出提示框 -->
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>确认操作</h2>
        <p>是否确认操作？</p>
        <label>
            <input type="checkbox" id="fillCodeOption"> 填写灯码
        </label>
        <div id="codeInputContainer" style="display: none;">
            <label for="lampCode">灯码:</label>
            <input type="text" id="lampCode" class="modal-input" placeholder="请输入灯码" style="width: 100%; margin-top: 5px; padding: 5px; border: 1px solid #ddd; border-radius: 4px;">
        </div>
        <div style="margin-top: 20px; text-align: right;">
            <button id="confirmButton">确定</button>
            <button id="cancelButton" style="margin-left: 10px;">取消</button>
        </div>
    </div>
</div>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        let totalAmount = 0;
        let selectedCount = 0;
        const products = []; // 存储商品信息

        // 从服务器获取商品数据
        $.ajax({
            url: 'proxyorder/products', // 这是您的 API 地址，根据实际情况调整
            method: 'GET',
            success: function(data) {
                // 假设返回的数据格式为 [{ id, product_id, spec_id, name, spec_name, price, stock, image }, ...]
                data.forEach(product => {
                    products.push(product); // 将获取到的商品添加到产品数组
                });
                renderProducts(products); // 渲染商品
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('获取商品数据失败:', textStatus, errorThrown);
            }
        });

        // 渲染商品函数
        function renderProducts(productList) {
            $('#product-items').empty(); // 清空商品列表
            productList.forEach(product => {
                $('#product-items').append(`
                        <div class="product" data-product-id="${product.product_id}" data-spec-id="${product.spec_id}" data-product-name="${product.name}" data-product-price="${product.price}" data-product-stock="${product.stock}" data-spec-name="${product.spec_name}">
                            <div class="product-image-name">
                                <img src="${product.image}" alt="${product.name}">
                                <div class="product-info">
                                    <div class="product-name">${product.name}</div>
                                    <div class="spec-name">${product.spec_name}</div>
                                </div>
                            </div>
                            <span class="stock">${product.stock}</span>
                            <span class="price">¥${product.price}</span>
                            <div class="button-container">
                                <button class="add-to-cart">加购</button>
                            </div>
                        </div>
                    `);
            });
        }

        // 搜索功能
        $('#search-button').on('click', function () {
            const searchTerm = $('#search-input').val().trim().toLowerCase(); // 获取搜索关键字
            const filteredProducts = products.filter(product =>
                product.name.toLowerCase().includes(searchTerm)
            ); // 过滤商品
            renderProducts(filteredProducts); // 渲染过滤后的商品列表
        });

        // 使用事件委托处理加购按钮
        $(document).on('click', '.add-to-cart', function () {
            const productElement = $(this).closest('.product');
            const productName = productElement.data('product-name');
            const productPrice = parseFloat(productElement.data('product-price')); // 转换为数字
            const productStock = parseInt(productElement.data('product-stock')); // 确保库存是整数
            const productId = productElement.data('product-id'); // 读取商品ID
            const specId = productElement.data('spec-id'); // 读取规格ID
            const specName = productElement.data('spec-name'); // 读取规格名

            // 检查购物车中是否已存在该商品（通过商品ID和规格ID组合）
            let cartItem = $('#cart-items').find(`.cart-item[data-product-id="${productId}"][data-spec-id="${specId}"]`);

            if (cartItem.length > 0) {
                // 更新数量和小计
                const existingQuantityInput = cartItem.find('.quantity input');
                const existingQuantity = parseInt(existingQuantityInput.val());
                const newQuantity = existingQuantity + 1; // 每次加购1个

                if (newQuantity <= productStock) { // 检查库存
                    existingQuantityInput.val(newQuantity);
                    cartItem.find('.price').text('¥' + (newQuantity * productPrice).toFixed(2));
                } else {
                    alert('库存不足'); // 库存不足提示
                }
            } else {
                // 添加新的购物车项
                const cartItemHtml = `
                        <div class="cart-item" data-product-id="${productId}" data-spec-id="${specId}">
                            <div class="cart-product-container">
                                <span class="cart-product">${productName}</span>
                                <span class="cart-product-spec">${specName}</span> <!-- 显示规格 -->
                            </div>
                            <span class="quantity"><input type="number" value="1" min="1" class="quantity-input" required></span>
                            <span class="price">¥${productPrice.toFixed(2)}</span>
                            <span class="button-container">
                                <i class="far fa-trash-alt remove-icon"></i>
                            </span>
                        </div>
                    `;
                $('#cart-items').append(cartItemHtml);
                selectedCount++; // 增加已选商品种类
            }

            // 更新总金额
            totalAmount += productPrice;
            $('#total-amount').text('¥' + totalAmount.toFixed(2));
            $('#selected-count').text(selectedCount); // 更新已选商品种类数
        });

        $(document).on('click', '.remove-icon', function () {
            const cartItem = $(this).closest('.cart-item');
            const subtotal = parseFloat(cartItem.find('.price').text().replace('¥', ''));

            // 减去小计和删除该项
            totalAmount -= subtotal;
            $('#total-amount').text('¥' + totalAmount.toFixed(2));
            cartItem.remove();

            // 更新已选商品种类数
            selectedCount = $('#cart-items').children().length; // 更新已选商品的数量
            $('#selected-count').text(selectedCount);
        });

        // 监听数量输入框失去焦点事件
        $(document).on('blur', '.quantity-input', function () {
            const quantityInput = $(this);
            let newQuantity = parseInt(quantityInput.val());
            const cartItem = quantityInput.closest('.cart-item');
            const productPriceStatic = parseFloat(cartItem.find('.price').text().replace('¥', ''));

            // 确保数量不为0或负数
            if (newQuantity <= 0 || isNaN(newQuantity)) {
                newQuantity = 1; // 如果是0或负数，重置为1
                quantityInput.val(newQuantity); // 更新输入框
            }

            // 计算新小计
            const newSubtotal = productPriceStatic * newQuantity;
            cartItem.find('.price').text('¥' + newSubtotal.toFixed(2));

            // 更新总金额
            totalAmount = 0; // 重新计算总金额
            $('#cart-items .cart-item').each(function () {
                const itemPrice = parseFloat($(this).find('.price').text().replace('¥', ''));
                totalAmount += itemPrice;
            });
            $('#total-amount').text('¥' + totalAmount.toFixed(2));
        });

        // 弹出提示框
        const modal = $('#myModal');
        const fillCodeOption = $('#fillCodeOption');
        const codeInputContainer = $('#codeInputContainer');

// 点击“下一步”按钮时显示弹出提示框
        $('.next-step').on('click', function () {
            const cartItems = checkCartItems(); // 获取购物车商品
            // 检查购物车是否为空
            if (cartItems.length === 0) {
                Toastr.error('请添加商品！');
                return; // 购物车为空，不弹出提示框
            }
            modal.show();
        });

// 关闭弹出框
        $('.close').on('click', function () {
            modal.hide();
            fillCodeOption.prop('checked', false);
            codeInputContainer.hide();
            $('#lampCode').val(''); // 清空灯码输入框
        });

// 根据灯码填写选项的状态显示或隐藏输入框
        fillCodeOption.on('change', function () {
            if ($(this).is(':checked')) {
                codeInputContainer.show();
            } else {
                codeInputContainer.hide();
            }
        });


        function checkCartItems() {
            const cartItems = [];
            $('#cart-items .cart-item').each(function () {
                const productId = $(this).data('product-id');
                const specId = $(this).data('spec-id');
                const quantity = parseInt($(this).find('.quantity input').val());

                // 仅添加数量大于0的商品
                if (quantity > 0) {
                    cartItems.push({
                        product_id: productId,
                        spec_id: specId,
                        num: quantity
                    });
                }
            });
            return cartItems;
        }


// 取消按钮逻辑
        $('#cancelButton').on('click', function () {
            modal.hide(); // 关闭弹出框
            fillCodeOption.prop('checked', false); // 复位复选框
            codeInputContainer.hide(); // 隐藏输入框
            $('#lampCode').val(''); // 清空灯码输入框
        });

        // 确定按钮逻辑
        $('#confirmButton').on('click', function () {
            const lampCode = $('#lampCode').val().trim();
            if (fillCodeOption.is(':checked') && lampCode === '') {
                Toastr.error('请填写灯码');
                return;
            }

            // 收集购物车数据
            const cartItems = checkCartItems(); // 获取购物车商品

            if (cartItems.length === 0) {
                Toastr.error('购物车内没有商品，无法提交订单！');

                return; // 终止操作
            }


            // 发送数据到服务器
            $.ajax({
                url: 'proxyorder/add_good_order', // 替换为您的 API 地址
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    lampCode: fillCodeOption.is(':checked') ? lampCode : null, // 如果需要灯码则传递
                    cartItems: cartItems
                }),
                success: function(response) {
                    if(response.code==1){
                        Toastr.success(response.messgin);
                        modal.hide(); // 关闭弹出框
                        setTimeout(function() {
                            location.reload(); // 刷新页面
                        }, 3000);


                    }else{
                        Toastr.error(response.messgin);
                    }
                   // alert('订单提交成功!'); // 成功提示

                    // 可以进一步处理返回数据
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert('订单提交失败: ' + textStatus); // 失败提示
                }
            });
        });
    });
</script>
</body>

</html>
